<template>
	<view @click.stop="closePop" class="content company-auth">
		<view class="anth-container">
			<view class="title flexbox flexbox-middle">提交企业认证信息</view>
			<view class="tip f-24">提供的信息只为审核认证，不会向其他组织机构泄露</view>
			<!-- <view class="list-item f-26 flexbox flexbox-middle">证件类型：<text>统一社会信用代码证</text></view>
			<view class="list-item f-26 flexbox flexbox-middle">上传证照： </view>
			<view @click="handleOcr" class="camera-box flexbox flexbox-center flexbox-middle">
				<view>
					<image class="camera-icon" src="/static/images/camera_icon.png"></image>
					<view class="f-247">拍摄统一社会信用代码证</view>
				</view>
			</view> -->
		</view>
		
		<view class="anth-container">
			<view class="title flexbox flexbox-middle">信息核验</view>
			<view class="tip"></view>
			<!-- <view class="tip f-24">以下为OCR识别结果，请在核对无误后提交</view> -->
			<view class="uni-form-item uni-column company-box">
				<view class="label f-26">企业名称：</view>
				<input class="uni-input" v-model="formData.company_name" @input="onKeyInput" placeholder="请输入企业名称" />
				<view v-show="ifPreview" class="preview-list">
					<view class="preview-list-scroll">
						<view @click.stop="selectItem(item)" class="flexbox flexbox-middle company-item f-28" v-for="(item, index) in companyList" :key="item.id">{{item.companyName}}</view>
					</view>
				</view>
			</view>
			
			<view class="uni-form-item uni-column">
				<view class="label f-26">社会信用代码：</view>
				<input class="uni-input" @input="onKeyInput2"  v-model="formData.credit_code" placeholder="请输入社会信用代码" />
			</view>
			
			<view class="uni-form-item uni-column">
				<view class="label f-26">法定代表人：</view>
				<input class="uni-input" @input="onKeyInput2" v-model="formData.legal_name" placeholder="法定代表人" />
			</view>
			
		</view>
		
		<view @click="handleAgreement" class="agreement-box flexbox-middle flexbox">
			<image v-if="agreementFlag"  class="agreement-icon" src="/static/images/selected.png"></image>
			<image v-else class="agreement-icon" src="/static/images/no-select.png"></image>
			<view>我已同意并阅读<text @click.prevent="agreement">《可信工作证用户服务协议》</text></view>
		</view>
		
		<view @click="handleSubmit" class="submit-btn flexbox flexbox-middle flexbox-center f-32" :class="{'disabled':!activeFlag}">提交</view>
		<login-alert :isShow="loginShow" @loginSuccess="loginSuccess" @closeLogin="closeLogin"/>
	</view>

</template>

<script>
	import loginAlert from '@/components/loginAlert/index.vue'
	export default {
		components:{
			loginAlert
		},
		data() {
			return {
				formData: {
					company_name: '',
					credit_code:'',
					legal_name: '',
					id: ''
				},
				activeFlag: false,
				ifPreview: false,
				companyList: [],
				agreementFlag: false,
				scan_flag: '',
				loginShow: false
			}
		},
		onLoad: function(e) {
			this.scan_flag = e.scan_flag || ''
			let ctid = e.ctid || ''
			if (ctid) {
				uni.setStorageSync('ctid', ctid);
			}
		},
		onShow() {
			if (uni.getStorageSync('authorization')) {
				this.getInfo()
				this.loginShow = false
			} else {
				this.loginShow = true
			}
		},
		methods: {
			handleOcr() {
				uni.showToast({
				    title: '敬请期待！',
				    icon: 'none'
				})
			},
			getInfo() {
				this.$HTTP.post('/wechat/userinfo', {}, true).then((res) => {
					if (res.data.role == 'user') {
						uni.redirectTo({
							url: `/pages/openWz-step1/index?type=companyAuth`
						});
						return false
					}
				}).catch(err => {
					
				}) 
			},
			loginSuccess(){
				this.loginShow = false
			},
			closeLogin() {
				this.loginShow = false
			},
			onKeyInput() {
				if (!this.formData.company_name) {
					this.ifPreview = false
					return
				}
				let param = {
					keyword: this.formData.company_name
				}
				if (this.formData.company_name && this.formData.credit_code && this.formData.legal_name && this.agreementFlag) {
					this.activeFlag = true
				} else {
					this.activeFlag = false
				}
				this.$HTTP.post('/inquire/prediction', param, false).then((res) => {
					this.companyList = res.data
					if (this.companyList.length > 0) {
						this.ifPreview = true
					}
					
				}).catch(err => {
					
				}) 
			},
			onKeyInput2() {
				if (this.formData.company_name && this.formData.credit_code && this.formData.legal_name && this.agreementFlag) {
					this.activeFlag = true
				} else {
					this.activeFlag = false
				}
			},
			selectItem(item) {
				let param = {
					id: item.id
				}
				this.ifPreview = false
				this.$HTTP.post('/inquire/baseinfo', param, false).then((res) => {
					this.formData.legal_name = res.data.legalPersonName || ''
					this.formData.company_name = item.companyName
					this.formData.credit_code = item.creditCode
					this.formData.id = item.id
				}).catch(err => {
					
				})
			},
			closePop() {
				this.ifPreview = false
			},
			
			handleSubmit() {
				if (!this.formData.company_name) {
					uni.showToast({
					    title: '请填写企业名称',
					    icon: 'none'
					})
					return false
				}
				if (!this.formData.credit_code) {
					uni.showToast({
					    title: '请输入社会信用代码',
					    icon: 'none'
					})
					return false
				}
				if (!this.formData.legal_name) {
					uni.showToast({
					    title: '请输入法定代表人',
					    icon: 'none'
					})
					return false
				}
				if(!this.agreementFlag) {
					uni.showToast({
					    title: '请先勾选实名认证服务协议',
					    icon: 'none'
					})
					return false
				}
				if(!uni.getStorageSync('authorization')){
					uni.redirectTo({
						url: `/pages/login/index?rurl=${encodeURIComponent('/pages/companyAuth/index')}&type=companyAuth&scan_flag=${this.scan_flag}`
					});
					return false
				}
				this.$HTTP.post('/audit/judgeOwnCompany', {}, true).then((res3) => {
					// 只能认证一家企业，如果已经认证过就不在认证
					if(!res3.isOwn){
						uni.navigateTo({
						    url: `/pages/authway/index?company_name=${this.formData.company_name}&credit_code=${this.formData.credit_code}&legal_name=${this.formData.legal_name}&id=${this.formData.id}&scan_flag=${this.scan_flag}`
						});
					} else {
						uni.showToast({
						    title: '您已经认证过其他企业',
						    icon: 'none'
						})
					}
				}).catch(err => {
					
				})
				
			},
			handleAgreement() {
				this.agreementFlag = !this.agreementFlag
				this.onKeyInput2()
			},
			agreement() {
				uni.navigateTo({
				    url: '/pages/agreement/index'
				});
			}
		}


	}
</script>

<style lang="scss" scoped>
	.anth-container {
		margin: 32rpx 40rpx;
		background-color: #FFFFFF;
		padding: 32rpx 32rpx 42rpx 32rpx;
		border-radius: 10px;
		.title {
			font-size: 40rpx;
			font-weight: bold;
		}
		.tip {
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			color: #FFA96B;
		}
		.camera-icon {
			width: 116rpx;
			height: 116rpx;
			margin-bottom: 20rpx;
		}
		.camera-box {
			margin: 30rpx 42rpx 0 42rpx;
			height: 292rpx;
			border-radius: 10rpx;
			border: 2rpx dashed #0579FE;
			text-align: center;
			color: #999999;
		}
		.list-item {
			margin-bottom: 15rpx;
			text{
				margin-left: 16rpx;
				color: #999999;
			}
		}
		.uni-input {
			height: 98rpx;
			color: #666666;
		}
	}
	
	.submit-btn {
		width: 454rpx;
		height: 93rpx;
		margin: 88rpx auto;
		background: #0579FE;
		box-shadow: 0px 6rpx 16rpx 0px rgba(5, 121, 254, 0.4);
		border-radius: 47rpx;
		color: #FFFFFF;
		&.disabled {
			background: #9EC9FB;
			box-shadow: 0px 6rpx 16rpx 0px rgba(5, 121, 254, 0.2);
		}
	}
	.company-box {
		position: relative;
	}
	.preview-list {
		width: 100%;
		position: absolute;
		background-color: #FFFFFF;
		border: 1rpx solid #f1f0f0;
		padding: 0 30rpx;
		box-sizing: border-box;
		max-height:366rpx;
		overflow: auto;
		left: 0;
		top: 130rpx;
		z-index: 9;
		.company-item {
			border-bottom: 1rpx solid #f1f0f0;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f1f0f0;
		}
	}
	.agreement-box {
		padding: 0 40rpx;
		color: #666666;
		.agreement-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
		text {
			color: #0579fe;
		}
	}
	
</style>
<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
</style>